<template>
  <div class="cone">
    <h2>第一个组件</h2>
    <ul>
      <li v-for="v in getCartAll">{{v.name}}-{{v.price}}-{{v.color}}</li>
    </ul>
    <hr>
    <p>{{obj}}</p>
    <hr>
    <p>{{getCount}}</p>
    <hr>
    <p>本地计算属性</p>
    <p>{{getLocalCount}}</p>
    <hr>
    <p>Getters方法获得价格大于300的商品</p>
    <ul>
      <li v-for="v in getpricedy">{{v.name}}-{{v.price}}-{{v.color}}</li>
    </ul>
    <hr>
    <p>第二个参数可以是getters 查询价格大于300并且名字是显示器</p>
    <p>{{getTow1}}</p>
    <p>getters传参</p>
    <p>{{$store.getters.getCS("鼠标")}}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
export default {
  name: "COne",
  data(){
    return {
      localCount:188
    }
  },
  //初步使用store
  // computed:{
  //   getCartAll(){
  //     return this.$store.state.cart;
  //   }
  // }

  //mapState 辅助
  // computed:mapState({
  //   //箭头函数
  //   obj:store=>store.obj,
  //   //cart 必须是 store里的属性名
  //   getCartAll:'cart',
  //   //通过函数返回 可以与组件内的数据进行加工
  //   getCount(store){
  //     return store.count + this.localCount
  //   }
  // })

  //mapState与局部计算属性混用
  //用到展开符
  // let arr = [1,2,3,4,5];
  // ...arr = 1,2,3,4,5
  // let obj = {name:'ljh'}
  // ...obj = name:'ljh'
  // ...mapState({
  //   obj:store=>store.obj 结构之后就是一个函数
  // })
  computed:{
    //存放的是函数
    getLocalCount(){
      return this.localCount + 1;
    },
    ...mapState({
        //箭头函数
        obj:store=>store.obj,
        //cart 必须是 store里的属性名
        getCartAll:'cart',
        //通过函数返回 可以与组件内的数据进行加工
        getCount(store){
          return store.count + this.localCount
        }
      }),
    //封装getters的方法
    getpricedy(){
      return this.$store.getters.getPrice
    },
    //映射到局部计算属性
    ...mapGetters({
      getTow1:'getTow'
    })
  }

}


</script>

<style scoped>
  .cone{
    width: 100%;
    height: 80%;
    background-color: #baff3a;
  }
</style>